+function($){

  var defaults = {
    min: 3,
    max: 10,
    val: 5,
    step: 2,
    change: $.noop
  }

  $.fn.numberbox = function( options ){

    options = $.extend({}, defaults, options);

    return this.each(function(){

      this.hidden = true;
      $('<div class="zy-number"></div>').insertBefore(this)
      .append(`
        <button>&#xe900;</button>
        <input size="3" value="${options.val}" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
        <button>&#xf0a2;</button>
      `).end().on('click','button',function(){
        if($(this).index()===2){
          $input = $(this).prev();
          var val = +$input.val();
          var num = val + options.step;
          if(num >= options.max - options.step ){
            this.disabled = true;
          }else{
            $(this).siblings('button')[0].disabled = false;
          }
          $input.val( num );
        }else if($(this).index()===0){
          $input = $(this).next();
          var val = +$input.val();
          var num = val - options.step;
          if(num <= options.min  ) {
            this.disabled = true;
          }else{
            $(this).siblings('button')[0].disabled = false;
          }
          $input.val(  val - options.step );
        }
      }).append(this);


    })

  }


}(jQuery);

